/*@use postcss-preset-env {
    stage: 0;
    features: {
"logical-properties-and-values": false
}
}*/

html {
    /* brand foundation */
    --brand-hue: 200;
    --brand-saturation: 100%;
    --brand-lightness: 50%;

    /* light */
    --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
    --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
    --text2-light: hsl(var(--brand-hue) 30% 30%);
    --surface1-light: hsl(var(--brand-hue) 25% 90%);
    --surface2-light: hsl(var(--brand-hue) 20% 99%);
    --surface3-light: hsl(var(--brand-hue) 20% 92%);
    --surface4-light: hsl(var(--brand-hue) 20% 85%);
    --surface-shadow-light: var(--brand-hue) 10% 20%;
    --shadow-strength-light: .02;

    /* dark */
    --brand-dark: hsl(
            var(--brand-hue)
            calc(var(--brand-saturation) / 2)
            calc(var(--brand-lightness) / 1.5)
    );
    --text1-dark: hsl(var(--brand-hue) 15% 85%);
    --text2-dark: hsl(var(--brand-hue) 5% 65%);
    --surface1-dark: hsl(var(--brand-hue) 10% 10%);
    --surface2-dark: hsl(var(--brand-hue) 10% 15%);
    --surface3-dark: hsl(var(--brand-hue) 5%  20%);
    --surface4-dark: hsl(var(--brand-hue) 5% 25%);
    --surface-shadow-dark: var(--brand-hue) 50% 3%;
    --shadow-strength-dark: .8;

    /* dim */
    --brand-dim: hsl(
            var(--brand-hue)
            calc(var(--brand-saturation) / 1.25)
            calc(var(--brand-lightness) / 1.25)
    );
    --text1-dim: hsl(var(--brand-hue) 15% 75%);
    --text2-dim: hsl(var(--brand-hue) 10% 61%);
    --surface1-dim: hsl(var(--brand-hue) 10% 20%);
    --surface2-dim: hsl(var(--brand-hue) 10% 25%);
    --surface3-dim: hsl(var(--brand-hue) 5%  30%);
    --surface4-dim: hsl(var(--brand-hue) 5% 35%);
    --surface-shadow-dim: var(--brand-hue) 30% 13%;
    --shadow-strength-dim: .2;
}

:root {
    color-scheme: light;

    /* set defaults */
    --brand: var(--brand-light);
    --text1: var(--text1-light);
    --text2: var(--text2-light);
    --surface1: var(--surface1-light);
    --surface2: var(--surface2-light);
    --surface3: var(--surface3-light);
    --surface4: var(--surface4-light);
    --surface-shadow: var(--surface-shadow-light);
    --shadow-strength: var(--shadow-strength-light);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --brand: var(--brand-dark);
        --text1: var(--text1-dark);
        --text2: var(--text2-dark);
        --surface1: var(--surface1-dark);
        --surface2: var(--surface2-dark);
        --surface3: var(--surface3-dark);
        --surface4: var(--surface4-dark);
        --surface-shadow: var(--surface-shadow-dark);
        --shadow-strength: var(--shadow-strength-dark);
    }
}

[color-scheme="light"] {
    color-scheme: light;

    --brand: var(--brand-light);
    --text1: var(--text1-light);
    --text2: var(--text2-light);
    --surface1: var(--surface1-light);
    --surface2: var(--surface2-light);
    --surface3: var(--surface3-light);
    --surface4: var(--surface4-light);
    --surface-shadow: var(--surface-shadow-light);
    --shadow-strength: var(--shadow-strength-light);
}

[color-scheme="dark"] {
    color-scheme: dark;

    --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
}

[color-scheme="dim"] {
    color-scheme: dark;

    --brand: var(--brand-dim);
    --text1: var(--text1-dim);
    --text2: var(--text2-dim);
    --surface1: var(--surface1-dim);
    --surface2: var(--surface2-dim);
    --surface3: var(--surface3-dim);
    --surface4: var(--surface4-dim);
    --surface-shadow: var(--surface-shadow-dim);
    --shadow-strength: var(--shadow-strength-dim);
}

* {
    box-sizing: border-box;
    margin: 0;
}

html {
    block-size: 100%;
    background-color: var(--surface1);
    color: var(--text1);
}

body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;
    padding: 5vmax;
    display: grid;
    place-content: center;
    gap: 5vmax;
}

main {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 10vmax 10vmin;
}

section {
    display: grid;
    gap: 2.5vh;
}

h1 {
    font-weight: 100;
}

p {
    max-inline-size: 35ch;
    font-size: 1.25rem;
    line-height: 1.5;
}

header {
    display: inline-grid;
    gap: 1ch;
}

form {
    display: flex;
    gap: 2ch;

    & > div {
        display: inline-flex;
        align-items: center;
        gap: .75ch;
    }
}

.surface-samples {
    display: grid;
    --size: 20ch;
    grid-template-columns: var(--size) var(--size);
    grid-auto-rows: var(--size);
    gap: 2ch;

    @media (width <= 480px) { & {
        --size: 40vw;
    }}

    & > * {
        border-radius: 1rem;
        display: grid;
        place-content: center;
        font-size: 3rem;
        font-weight: 200;
    }
}

.text-samples {
    display: grid;
    gap: 1.5ch;

    & > h1 {
        font-size: 2.5rem;
        display: inline-flex;
        align-items: center;
        gap: 1ch;
    }
}

.brand {
    color: var(--brand);
    background-color: var(--brand);
}

.surface1 {
    background-color: var(--surface1);
    color: var(--text2);
}

.surface2 {
    background-color: var(--surface2);
    color: var(--text2);
}

.surface3 {
    background-color: var(--surface3);
    color: var(--text1);
}

.surface4 {
    background-color: var(--surface4);
    color: var(--text1);
}

.text1 {
    color: var(--text1);
    @nest p& {
        font-weight: 200;
    }
}

.text2 {
    color: var(--text2);
}

.swatch {
    display: inline-block;
    flex-shrink: 0;
    inline-size: 1.5ch;
    block-size: 1.5ch;
    border-radius: 50%;

    &.text1 { background-color: var(--text1); }
    &.text2 { background-color: var(--text2); }
}

.rad-shadow {
    border: 1px solid hsl(var(--brand-hue) 10% 50% / 15%);
    box-shadow: 0 1rem .5rem -.5rem;
    box-shadow:
            0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
            0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
            0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
            0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
            0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
            0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
;
}